<template>
  <div class="hello">
    <div  v-if="bool" class="box ">
      <h1>完善个人信息</h1>
      <ul>
        <li><h3>姓名</h3><input type="text" v-model="id" placeholder="姓名(必填)"></li>
        <li><h3>年龄</h3><input type="text" v-model="age" placeholder="年龄(必填)"></li>
        <li><h3>性别</h3>
          <label><input type="radio" name="sex" v-model="sex" value="男">男</label>
          <label><input type="radio" name="sex" v-model="sex" value="女">女 </label></li>
        <li>
          <h3>婚姻状态</h3>
          <label><input type="radio" v-model="marry" value="已婚" name="marry">已婚</label>
          <label><input type="radio" v-model="marry" value="未婚" name="marry">未婚 </label>
        </li>
        <li>
          <h3>爱好</h3>
          <label><input type="checkbox" name="hobby" value="音乐" v-model="hobby" >音乐</label>
          <label><input type="checkbox" name="hobby" value="运动" v-model="hobby" >运动</label>
          <label><input type="checkbox" name="hobby" value="旅游" v-model="hobby" >旅游</label>
          <label><input type="checkbox" name="hobby" value="上网" v-model="hobby" >上网</label>
          <label><input type="checkbox" name="hobby" value="代码" v-model="hobby" >代码</label>
        </li>
        <li>
          <h3>年底旅游地</h3>
          <select name="" v-model="travel" >
            <option>西安</option>
            <option>上海</option>
            <option>北京</option>
            <option>东京</option>
            <option>南京</option>
          </select>
        </li>
        <li>
          <h3>喜欢的颜色</h3>
          <input type="color">
        </li>
        <li>
          <h3>自我介绍</h3>
          <textarea v-model="introduction"  rows="10" cols="40"></textarea>
        </li>
        <li>
          <h3 >出生日期</h3>
          <input type="datetime-local" v-model="time">
        </li>
      </ul>
      <button @click="btn()">确认提交</button>
    </div>
    <div class="box2 "  v-else>
      <h1>您的个人信息</h1>
      <table cellspacing="0">
        <tr>
          <td>姓名</td>
          <td>{{ id }}</td>
        </tr>
        <tr>
          <td>年龄</td>
          <td>{{ age }}</td>
        </tr>
        <tr>
          <td>性别</td>
          <td >{{ sex }}</td>
        </tr>
        <tr>
          <td>婚姻</td>
          <td>{{ marry }}</td>
        </tr>
        <tr>
          <td>爱好</td>
          <td>{{ arr }}</td>
        </tr>
        <tr>
          <td>年底旅游地</td>
          <td>{{ travel }}</td>
        </tr>
        <tr>
          <td>喜欢的颜色</td>
          <td>没啥特别的颜色</td>
        </tr>
        <tr>
          <td>自我介绍</td>
          <td>{{ introduction }}</td>
        </tr>
        <tr>
          <td>出生日期</td>
          <td>{{ timec }}</td>
        </tr>
      </table>

    </div>
  </div>
</template>

<script>
export default {
  name: 'InformationSection',
  props: {
    msg: String
  },
  data() {
    return {
      id:'',
      age:'',
      sex:'',
      marry:'',
      hobby:[],
      arr:'',
      travel:'',
      introduction:'',
      time:'',
      timec:'',
      bool:true,
      btn() {
        if(this.id===''||this.age===''){
          alert("请输入必填项")
          return
        }
        if(this.sex==='')this.sex='男'
        if(this.marry==='')this.marry='已婚'
        if(this.hobby.length===0){
          this.arr='没啥特别爱好'
        }else{

          for (let i = 0; i < this.hobby.length; i++) {
            if(i+1===this.hobby.length){
              this.arr+=this.hobby[i]
            }else{
              this.arr+=(this.hobby[i]+'、')
            }
          }
        }
        if(this.travel==='')this.travel='不旅游'
        if(this.introduction==='')this.introduction='此人高冷，暂无介绍~'
        if(this.time===''){
          this.timec='未知'
        }else{
          this.timec=this.time.slice(0,10)

          console.log(typeof this.time)
        }
        this.bool=!this.bool
      }

    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box {
  width: 500px;
  height: 680px;
  border: 1px solid #ccc;
  border-radius: 20px;
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  input {
    outline: none;

  }
  button{
    margin-left:30px;

  }

  h1 {
    margin: 25px;
  }

  h3 {
    width: 100px;
    margin-left: 10px;
    text-align: right;
    margin-right: 20px;

  }

  ul li {
    display: flex;
    margin-bottom: 20px;

  }

}

.box2 {
  width: 500px;
  height: 600px;
  border: 1px solid #ccc;
  border-radius: 20px;
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;

  h1 {
    margin: 20px;
  }

  table {
    width: 80%;
    margin-left: 20px;
    border: 1px solid #ccc;
    border-top: none;
    border-right: none;
    font-size: 15px;

    td {
      text-indent: 20px;
      height: 30px;
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
      padding: 8px 0;

    }
  }
}

</style>
